<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="node_modules/vue-resource/dist/vue-resource.js"></script>
</head>

<body>
  <div id="app" class="container">
    <h1>vue-resource插件讲解</h1>
    <a href="javascript:;" class="btn btn-primary" v-on:click="get">Get 请求</a>
    <a href="javascript:;" class="btn btn-primary" @click="post">Post 请求</a>
    <a href="javascript:;" class="btn btn-primary" @click="jsopn">JSOPN 请求</a>
    <br>
    <span>{{msg}}</span>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        msg: ''
      },
      methods: {
        get: function () {
          this.$http.get("package.json", {
            params: {
              userId: "101"
            },
            headers: {
              token: "abcd"
            },
          }).then(res => {
            this.msg = res.data;
          }, error => {
            this.msg = error;
          });
        },
        post: function () {
          this.$http.post("package.json", {
            userId: "102"
          },{
            headers: {
              access_token: "abc"
            }
          }).then(function (res) {
            this.msg = res.data;
          });
        },
        jsopn:function () {
          
        }
      }
    });

  </script>
</body>

</html>


